import 'package:flutter/material.dart';

// ListView组件是最常用的滚动组件之一, 它可以沿纵向或者横向去线性排布所有子组件
// ListView 四种构建方式:
// 1. 默认构造函数
// 2. 命名构造函数builder
// 3. 命名构造函数separated
// 4. 命名构造函数Custom(很少用)

// 默认构造函数
// 1. 使用场景: 展示静态的已知个数的列表数据时使用(item较少时使用)
// 2. 使用方式: 使用children属性, 存放列表要展示的Item组件
// 3. 提示: 由于会一次性创建所有Item, 所以在使用时尽量展示较少的Item
// 4. 常用属性:
//  // 1. children: 存放列表子组件
//  // 2. controller: 滚动控制器,用于监听列表滚动
//  // 3. shrinkWrap: 是否根据Item的总长度来设置ListView的长度
//  // 4. Physics: 滚动效果,比如: 回弹效果, 禁用滚动等
//  // 5. ScrollDirection: 滚动方向(纵向, 横向)

class ListViewWidget extends StatelessWidget {
  const ListViewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: const Text('案例-ListView'),
      ),
      body: ListView(
        // 禁用滚动
        // physics: const NeverScrollableScrollPhysics(),
        // 滚动方向 Axis.vertical 别名:Axis.values[1] 纵向  Axis.horizontal 别名: Axis.values[0] 横向
        scrollDirection: Axis.values[1],
        children: [
          // 要展示的子元素
          Container(
            height: 100,
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.pink,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
          Container(
            height: 100,
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('案例-ListView'),
          ),
        ],
      ),
    );
  }
}
